<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <title>用户授权</title>
    <script src="../js/vue/dist/vue.min.js"></script>
    <script src="../js/element-ui/lib/index.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/web-util.js"></script>
    <link rel="stylesheet" href="../js/element-ui/lib/theme-chalk/index.css">
    <style type="text/css">
        .el-row{
            margin-bottom: 20px;
        }
        .el-tree{
            border: 1px solid #DCDFE6;
            margin-right: 5px;
        }
        .el-main{
            padding: 0;
        }
        body{
            height: 85%;
            margin: 10px;
            background: #ffffff;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <el-container >
            <el-aside style="width:500px;margin-right: 20px">
                <el-table ref="userTable" v-loading="loading" @row-click="onUserClick" :data="userTable" row-class-name="row_padding" header-row-class-name="head_padding" highlight-current-row border style="width: 100%">
                    <el-table-column label="姓名" prop="nickName"   align="center" header-align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column label="所属机构" prop="orgName" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column label="手机号" prop="telephone" align="center" show-overflow-tooltip></el-table-column>
                </el-table>
                <div style="text-align: right;margin-top: 8px;">
                    <el-pagination
                            @size-change="onUserListSizeChange"
                            @current-change="onUserListCurrentChange"
                            :current-page="userForm.current"
                            :page-sizes="[2, 10, 50, 100]"
                            :page-size="userForm.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="userForm.total">
                    </el-pagination>
                </div>
            </el-aside>
            <el-main>
                <el-tabs type="border-card">
                    <el-tab-pane label="用户权限">

                        <el-row>
                            <el-col :span="24">
                                <el-button type="primary" icon="el-icon-plus" @click="savePermission" size="small">授权</el-button>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="24">
                                <el-table ref="roleTable" @selection-change="onRoleSelect" row-key="roleCode" v-loading="loading" :data="roleTable" row-class-name="row_padding" header-row-class-name="head_padding" highlight-current-row border style="width: 100%">
                                    <el-table-column type="selection" width="55"></el-table-column>
                                    <el-table-column label="角色名称" prop="roleName"   align="center" header-align="center" show-overflow-tooltip></el-table-column>
                                    <el-table-column label="状态" prop="businessFlag" align="center">
                                        <template slot-scope="scope">
                                            <span v-html="showBusinessStatusImage(scope.row.businessFlag)"></span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>

                    </el-tab-pane>
                </el-tabs>

            </el-main>
        </el-container>
    </template>
</div>
</body>
<script src="UserPermission.js" type="text/javascript"></script>
</html>

